<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <script th:src="@{/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/js/axios.js}" type="text/javascript"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        #header{
            margin-top: 0px;
            height: 102px;
            vertical-align: middle;
            padding-top: 0px;
        }
        #logo{
            position: absolute;
            left: 10px;
            top: 50px;
            z-index: 999;
        }
        #main{
            margin-left: 210px;
            padding-right: 0px;
            padding-top: 0px;
            background-color: #FFF;
            border: 1px solid #666;
            margin-right: 5px;
            margin-top: 70px;
        }
        #main h2{
            margin: 0px 0px 0px 0px;
            background-color: #B6C9E7;
            padding: 3px;
            border-bottom: 1px solid #666;
            font-family: Arial;
            height: 20px;
            font-size: 13px;
        }
        #main h2 a{
            margin: 0px 0px 0px 0px;
            background-color: #B6C9E7;
            padding: 0px;
            font-family: Arial;
            font-size: 9pt;
            color: Black;
            text-decoration: none;
        }
        #main .PagerLink{
            background-color: #FFFFFF;
            padding: 4px;
            padding-bottom: 0px;
            font-family: Arial;
            font-size: 9pt;
            text-align: right;
            font-weight: normal;
            bottom: 0px;
            margin-bottom: 0px;
            margin-right: 10px;
        }
        #main .post{
            font-family: Arial;
            font-size: 12px;
            line-height: 150%;
            border-bottom: none;
            margin-top: 0px;
            padding-top: 0px;
            margin-right: 0px;
            padding-right: 0px;
        }
        #authors{
            top: 140px;
            position: absolute;
            width: 200px;
            left: 5px;
            background-color: #FAFAFA;
            border-left: 1px solid #666;
            border-right: 1px solid #666;
            border-bottom: 1px solid #666;
            font-size: 12px;
            margin-top:0px;
            padding-top:0px;
            overflow:hidden;
        }
        #authors ul{
            list-style: none;
            margin-bottom:3px;
            padding-left:5px;
            padding-right:5px;
            list-style-type:circle;
            padding-top:5px;
            margin-top:0px;
            margin-left:5px;
            width:190px;
        }
        #authors li{
            border-bottom:1px dotted #DDDDDD;
            margin-top:2px;
            line-height:20px;
            list-style: none;
        }
        #authors h2{
            color: #FFF;
            margin-bottom: 2px;
            margin-top:0px;
            background-color: #6B86B3;
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
            padding-top: 3px;
            padding-bottom: 3px;
            font-family: Verdana;
            font-size: 12px;
            text-align: center;
            text-transform: uppercase;
            font-weight:normal;
            width:200px;
        }
        #authors h2 a{
            margin: 15px 5px;
            color: #FFF;
            margin: 0px;
            margin-bottom: 0px;
            background-color: #6B86B3;
            border-bottom: 1px solid #666;
            border-top: 1px solid #666;
            padding-top: 3px;
            padding-bottom: 3px;
            font-family: Verdana;
            font-size: 12px;
            text-align: center;
            text-transform: uppercase;
            text-decoration:none;
        }
        #authors h3{
            text-align:center;
            margin-top:0px;
            margin-bottom:0px;
            padding-top:0px;
            padding-bottom:0px;
        }
        #authors h4{
            text-align:center;
            margin-top:4px;
            margin-left:0px;
            margin-bottom:4px;
            padding-top:0px;
            padding-bottom:0px;
            font-family: Verdana;
            font-size: 12px;
            font-weight:normal;
        }
        #authors .NavLinkli{
            margin-top:0px;
            width:180px;
            overflow:hidden;
            word-break:break-all;
        }
        #authors .NavLink a:link,
        #authors .NavLink a:active,
        #authors .NavLink a:visited {
            text-decoration:none;
            color:#3B5998;
        }
        #authors .NavLink a:hover {
            text-decoration:underline;
            color:Red;
        }
    </style>
</head>
<body>
<div id="app">
    <div th:include="~{menu/head::head}"></div>
<div id="header">
    <div id="logo">
        <h1>
            <a href="#">
                <img src="/css/img/logo.jpg" style="border-width: 0px;">
            </a>
        </h1>
    </div>
    <div id="main">
        <h2>
            首页技术区最新随笔
        <a href="#">(rss)</a>
        <a href="#">
            <img src="/css/img/rss.jpg" border="0" alt="RSS" align="absmiddle">
        </a>
        </h2>
        <div class="PagerLink">
            <a href="/user/go2Add">注册</a>
            &nbsp;&nbsp;
            <a href="javascript:void(0)" @click="showT()" v-if="showTitle==0">仅列出标题</a>
            <a href="javascript:void(0)" @click="showAll()" v-if="showTitle==1">列出全部内容</a>
        </div>
        <hr>
        <div class="post" v-for="obj in blogs">
            <h3>
                {{obj.title}}
            </h3>
            <h4 >
                <p v-if="showTitle==0">
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    {{obj.digest}}
                    &nbsp;&nbsp;
                    <a href="#" @click="read(obj.id)">阅读全文</a>
                </p>
                <p class="postfoot" align="right">
                    发布时间:{{obj.tpress}}&nbsp;
                    作者:{{obj.author}}&nbsp;
                    阅读:{{obj.pageviews}}&nbsp;
                </p>
            </h4>
            <hr>
        </div>
    </div>
    <div id="authors">
        <h2>技 术 改 变 世 界</h2>
        <ul class="NavLink">
            <li class="NavLinkli">
                <a href="/user/go2Add">申请注册</a>
            </li>
            <li class="NavLinkli" >
                <a v-if href="/login/go2Login">登录</a>
            </li>
        </ul>
        <h2>宣传语</h2>
        <ul>
            <li class="NavLinkli" style="font-size:13px;color:blue;margin-right:3px">
                发表原创精品文章,<br>
                共建精品Java社区!
            </li>
        </ul>
        <h2>
            网站分类
        </h2>
        <ul class="NavLink">
            <li class="natitle" v-for="obj in blogtypes" @click="findType(obj.id)">
                <a href="javascript:void(0)" >{{obj.type}}({{obj.num}})</a>
            </li>
        </ul>
        <h2>站内搜索</h2>
        <h4>
            <el-input size="mini"
                    placeholder="请输入内容"
                    v-model="title"
                    clearable>
            </el-input>
            <el-button @click="findByTitle()" size="mini" type="primary" icon="el-icon-search">搜索</el-button>
        </h4>
    </div>
</div>
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            blogtypes:[{id:0}],
            blogs:[],
            showTitle:0,
            activeIndex: '1',
            title: null
        },
        methods:{
            findType(id){
                var that = this;
                axios.get("/public/findBlogsByTypeId/"+id).then(function (resp) {
                    that.blogs = resp.data.data
                })
            },
            read(blogId){
                sessionStorage.setItem("blogId",blogId);
                window.location.href="/public/go2Read/"+ blogId;
            },
            showT(){
                this.showTitle=1;
            },
            showAll(){
                this.showTitle=0;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            findByTitle(){
                var that = this
                axios.get("/public/findByTitle/"+that.title).then(function (resp) {
                    that.blogs = resp.data.data;
                })
            }
        },
        mounted:function () {
            var that = this
            axios.get("/public/findAllBlogTypes").then(function (resp) {
                console.log(resp.data)
                that.blogtypes = resp.data.data;
                axios.get("/public/findBlogsByTypeId/"+that.blogtypes[0].id).then(function (resp) {
                    that.blogs = resp.data.data
                })
            })
        }
    })
</script>
</html>